import {defineComponent, ref, onMounted, computed, h, onUnmounted} from 'vue';

import Pagination from '~/src/components/Pagination';
import Table from '~/src/components/table';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import {dyhyd, gethyd} from "@/api/his";
import {showConfirm, showMessage, usePage} from "@/utils/hooks";
import {dyhydType, QhType} from "@/api/typing";
import { closeLoading, showLoading } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const pageSize = ref(0);
        pageSize.value = KEEP_VIDEO_TOP ? 6 : 11;

        // 表格表头（保持不变）
        const tableColumns = ref([
            {
                title: '项目名称',
                dataIndex: 'XMMC',
                align: "center" as "center",
                textalign: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', width: '150px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '科室',
                dataIndex: 'JZKS',
                align: "center" as "center",
                textalign: "left" as "left",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px', width: '130px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '就诊日期',
                dataIndex: 'JZRQ',
                align: "center" as "center",
                textalign: "center" as "center",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px',width: '120px', fontWeight: 'bold' as "bold" },
            },
            {
                title: '打印状态',
                dataIndex: 'DYZT',
                align: "center" as "center",
                textalign: "center" as "center",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px',width: '80px', fontWeight: 'bold' as "bold"},
            },
            {
                title: '操作',
                dataIndex: 'CZ',
                align: "center" as "center",
                cellStyle: { fontSize: '30px' },
                headerStyle: { fontSize: '30px',width: '80px', fontWeight: 'bold' as "bold"},
                render: (record: dyhydType) => (
                    <div style={{ textAlign: 'center' }}>
                        {/* 打印按钮 */}
                        <button
                            style={{
                                width: '120px',
                                height: '50px',
                                fontSize: '20px',
                                backgroundColor: record.status !== 0 ? '#cccccc' : '#4CAF50',
                                color: 'white',
                                border: 'none',
                                borderRadius: '8px',
                                cursor: 'pointer',
                            }}
                            disabled={record.status !== 0}
                            onClick={() => handleTakeNumber(record)}
                        >
                            <span style={{ fontSize: '25px' }}>打印</span>
                        </button>
                    </div>
                ),
            },
        ]);

        onUnmounted(() => {
            ElMessageBox.close();
        });
        // 打印按钮点击事件
        const handleTakeNumber = async (record: dyhydType) => {
            const isConfirm = await showConfirm('提示', `确定要打印操作吗？`, 'warning');

            if (isConfirm) {
                console.log(`打印${record.id} - 就诊日期: ${record.JZRQ}, 科室: ${record.JZKS}, 项目名称: ${record.XMMC}`);
                const res = await dyhyd({ id: record.id });
                showMessage('打印成功！', 'success');
                getdyhydData();
            } else {
                showMessage('已取消打印操作！', 'info');
            }
        };

        // 表格数据相关（保持不变）
        const showDatas = ref();
        const handlePageChange = (Datas: any) => {
            showDatas.value = Datas;
        };


        const tableData = ref<dyhydType[]>([]);

        // 获取打印单数据
        async function getdyhydData() {
            showLoading();
            try {
                const res = await gethyd({  });
                // 如果res.rows里item.status等于0的put进去一个DYZT列，值为待打印，等于1、已打印
                res.rows!.forEach((item: dyhydType) => {
                    item.DYZT = item.status === 0 ? '待打印' : '已打印';
                })
                tableData.value = res.rows!;
            } finally {
                closeLoading();
            }
        }

        getdyhydData();

        onMounted(() => {});

        return () => (
            <>
                <div class={Style.top}>
                    <UserInfo ></UserInfo>
                    <div class={Style.container_mar} >
                        <div class={Style.body}>
                            <Table
                                columns={tableColumns.value}
                                data={showDatas.value}
                                tableStyle={{}}
                                containerStyle={{ width: "97%", height: "100%" }}
                            ></Table>
                        </div>
                        <Pagination
                            style={{ margin: '0 63px' }}
                            pageSize={pageSize.value}
                            Data={tableData.value}
                            onPageChange={handlePageChange}
                        ></Pagination>
                    </div>
                </div>

            </>
        );
    }
})
